<template>
  <div class="date-box">
    <div class="date-time">{{ dateObj.time }}</div>
    <div class="date-date">
      {{ dateObj.date }}&nbsp;<span class="date-day">|&nbsp;{{ dateObj.week }}</span>
    </div>
    <!-- <div class="date-day">{{ dateObj.week }}</div> -->
  </div>
</template>
<script setup lang="ts" name="timeModal">
import {dateFormat, FormatsEnums} from "@/utils/video";
import { onMounted, reactive } from "vue";

interface IDate {
  time: string;
  week: string;
  date: string;
  timer: number;
}

const dateObj: IDate = reactive({
  time: "--:--:--",
  date: "----/--/--",
  week: "--",
  timer: 0
});

const weekList = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];

const getTime = () => {
  dateObj.time = dateFormat(0, FormatsEnums.TIME);
  dateObj.date = dateFormat(0, FormatsEnums.YMD);
  let weekDay = new Date().getDay();
  dateObj.week = weekList[weekDay - 1];
  // console.log(time);
};

onMounted(() => {
  dateObj.timer = window.setInterval(() => {
    getTime();
  }, 1000);
});
</script>
<style scoped lang="scss">
</style>
